import { Avatar } from "@/components/Avatar";
import React from "react";
import styles from "./GroupAvatar.less";

export default (props) => {
  const { src } = props;

  const maxCount = 9;
  const srcShow = Array.isArray(src) ? src.slice(0, maxCount) : [];

  return (
    <div className={styles["group-avatar"]} style={props.style}>
      {srcShow.map((src, index) => (
        <div className={styles["single-avatar"]} key={`group-avatar-${index}`}>
          <Avatar src={src} style={{ width: "100%", height: "100%" }} />
        </div>
      ))}
    </div>
  );
};
